<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            function doAdd(){
                // var li=$("<li>");
                // li.html("我是li");

                // var li=$("<li>我是li</li>");

                // 父节点添加子节点(默认添加到末尾)
                // $("ul").append(li);

                //子节点添加到父节点(默认添加到末尾)
                // $("<li>我是li</li>").appendTo($("ul"));

                //子节点添加到父节点(默认添加到开始)
                // $("<li>我是li</li>").prependTo($("ul"));

                // 父节点添加子节点(默认添加到开始)
                // $("ul").prepend($("<li>我是li</li>"));


               // 在ul节点的后面添加p节点
               $("ul").after($("<p>this is p </p>"));
            }

            function doDelete(){
                // $("ul li:first").remove();//删除节点

                $("ul li:first").empty();//清空节点
            }
            function doClone(){
                $("ul li:first").click(function(){
                    console.log("点击事件");
                });

                //clone(true)克隆元素，true表示克隆元素的事件
                $("ul li:first").clone(true).appendTo($("ul"));
            }
        </script>
    </head>
    <body>
        <input type="button" value="添加节点" onclick="doAdd()">
        <input type="button" value="删除节点" onclick="doDelete()">
        <input type="button" value="克隆节点" onclick="doClone()">
        <ul>
            <li>li01</li>
            <li>li02</li>
            <li>li03</li>
        </ul>
    </body>
</html>